<template>
  <main class="screen-bg">
    <div class="header"></div>

    <div class="left-top">
      <PieEcharts :echartDatas="chargingPile.data" />
    </div>
    <div class="left-bottom">
      <LineEcharts :echartDatas="processMonitoring.data" />
    </div>

    <div class="right-top">
      <RightTopPanel
        :panelItems="chargingTop4.data"
        :percentage="chargingTop4.totalPercentage"
      />
    </div>
    <div class="right-center">
      <BarEcharts :echartDatas="chargingStatistics.data" />
    </div>
    <div class="right-bottom">
      <ExceptionMonitoring :dots="exceptionMonitoring.data" />
    </div>

    <div class="center">
      <CenterSvg />
    </div>
    <div class="bottom">
      <BottomPanel :panelItems="dataAnalysis.data" />
    </div>
  </main>
</template>

<script setup lang="ts">
import PieEcharts from "@/components/pie-echarts.vue";
import LineEcharts from "@/components/line-echarts.vue";
import BarEcharts from "@/components/bar-echarts.vue";
import ExceptionMonitoring from "@/components/exception-monitoring.vue";
import CenterSvg from "@/components/center-svg.vue";
import BottomPanel from "@/components/bottom-panel.vue";
import RightTopPanel from "@/components/right-top-panel.vue";
import useEchartsStore from "@/stores/echarts";
import { storeToRefs } from "pinia";

const echartStore = useEchartsStore();
echartStore.fetchEchartAction();
const {
  chargingPile,
  processMonitoring,
  chargingStatistics,
  exceptionMonitoring,
  dataAnalysis,
  chargingTop4,
} = storeToRefs(echartStore);
</script>

<style lang="scss" scoped>
.screen-bg {
  /* 定位 */
  position: absolute;
  width: 100%;
  height: 100%;

  /* 背景 */
  background-color: #070a3c;
  background-image: url(@/assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.header {
  /* 定位 */
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 56px;

  /* 背景 */
  background-image: url(@/assets/images/bg_header.svg);
  background-repeat: no-repeat;
}

.left-top {
  /* 定位 */
  position: absolute;
  top: 116px;
  left: 16px;
  width: 536px;
  height: 443px;
  /* 背景 */
  background-image: url(@/assets/images/bg_left-top.svg);
  background-repeat: no-repeat;
}

.left-bottom {
  /* 定位 */
  position: absolute;
  bottom: 49px;
  left: 16px;
  width: 536px;
  height: 443px;
  /* 背景 */
  background-image: url(@/assets/images/bg_left_bottom.svg);
  background-repeat: no-repeat;
}

.right-top {
  position: absolute;
  right: 17px;
  top: 96px;
  width: 519px;
  height: 327px;

  background-image: url(../assets/images/bg_right_top.svg);
  background-repeat: no-repeat;
}
.right-center {
  position: absolute;
  right: 17px;
  top: 443px;
  width: 519px;
  height: 327px;

  background-image: url(../assets/images/bg_right_center.svg);
  background-repeat: no-repeat;
}
.right-bottom {
  position: absolute;
  right: 17px;
  bottom: 49px;
  width: 519px;
  height: 242px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(../assets/images/bg_right_bottom.svg);
  background-repeat: no-repeat;
}

.center {
  position: absolute;
  right: 540px;
  bottom: 272px;
  width: 823px;
  height: 710px;

  /* border: 5px solid pink; */
}

.bottom {
  position: absolute;
  right: 540px;
  bottom: 49px;
  width: 823px;
  height: 209px;

  background-image: url(../assets/images/bg_bottom.svg);
  background-repeat: no-repeat;
}
</style>
